<template>
  <Swiper ref="swiper" class="box" :options="options">
    <SwiperSlide v-for="item in 10" :key="item">
      <p>{{ item }}</p>
    </SwiperSlide>
    <!-- 分页器 -->
    <div slot="pagination" class="swiper-pagination" />
  </Swiper>
</template>

<script>
import 'swiper/css/swiper.min.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'SwiperModule',
  components: {
    Swiper,
    SwiperSlide
  },
  data() {
    return {
      // options配置项: 使用swiper官网的配置项即可
      options: {
        // 自动轮播图
        autoplay: false,
        // 无缝衔接
        loop: true,
        // 分页器配置项
        pagination: {
          el: '.swiper-pagination',
          clickable: true // 点击分页器小球进行轮播图切换
        },
        // 设置为水平方向
        direction: 'vertical',
        // 开启鼠标滚轮控制
        mousewheel: true
      }
    }
  },
  mounted() {
    // // 鼠标进入-暂停
    // this.$refs.swiper.$el.onmouseenter = () => {
    //   this.$refs.swiper.$swiper.autoplay.stop()
    // }
    // // 鼠标离开-开始
    // this.$refs.swiper.$el.onmouseleave = () => {
    //   this.$refs.swiper.$swiper.autoplay.start()
    // }
  }

}
</script>

<style scoped lang="scss">
.box {
  width: 100%;
  height: 100vh;
  p {
    width: 100%;
    height: 100%;
    background: #f00;
  }
}
</style>
